<!--复选框-->
<template>
  <div class="example tableClass">
    <zz-auto
      class="mb20"
      placeholder="软件名称"
      label="soft_name"
      :onInput="setSoftId"
      :isBorder = true
      query = 'query.soft_name'
      url= '/soft/need_findBySoftName.htm'
      :onSelect="selectSoft">
    </zz-auto>
    <table cellspacing="0">
      <tr>
        <th>1) 调用文件组件</th>
      </tr>
      <tr>
        <td><pre>{{explameCall}}</pre></td>
      </tr>
      <tr>
        <th>2) 写入到methods方法</th>
      </tr>
      <tr>
        <td><pre>{{explameMethods}}</pre></td>
      </tr>
    </table>
  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        explameCall: `<zz-auto
      placeholder="默认显示"
      :disabled = false 是否能输入
      label="soft_name"  要显示服务端传过来list中的字段
      :isBorder = true 是否加入边框
      :min = 0 最小输入值
      query = 'query.soft_name'  请求的参数
      constant = 'query.soft_id'  如果有第二个参数
      url= '/soft/need_findBySoftName.htm' ajax的接口
      :process = "process"  处理服务端返回过来的list
      :onInput = "onInput"
      :onShow = "onShow"
      :onBlur = "onBlur"
      :onHide = "onHide"
      :onFocus = "onFocus"
      :onSelect = "selectSoft"
      :onBeforeAjax = "onBeforeAjax"
      :onAjaxProgress = "onAjaxProgress"
      :onAjaxLoaded = "onAjaxLoaded"
      :onShouldGetData = "onShouldGetData"
      >`,

        explameMethods:
          `optionClick (state) {
            this.state = state
            console.log(this.state)
          }`
      }
    },
    methods: {
      optionClick (state) {
        this.state = state
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 20%;
    }
    .example-right{
      float: right;
      width: 70%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
